<template>
  <div>
    <h4>属性</h4>
    <div class="p-4">
      <el-form-item label="属性">
        <el-input v-model="fieldStore.curField.prop" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="fieldStore.curField.label" />
      </el-form-item>
      <el-form-item label="是否禁止编辑">
        <el-switch v-model="fieldStore.curField.disabled" />
      </el-form-item>

      <el-form-item label="是否必填">
        <el-switch v-model="fieldStore.curField.required" />
      </el-form-item>


      <el-form-item label="搜素标签宽度">
        <el-input v-model="fieldStore.curField.searchLabelWidth" />
      </el-form-item>

      <el-form-item label="搜素排序">
        <el-input v-model="fieldStore.curField.searchOrder" />
      </el-form-item>

      <el-form-item label="快速搜素">
        <el-switch v-model="fieldStore.curField.search" />
      </el-form-item>

      <el-form-item label="搜素初始值">
        <el-input v-model="fieldStore.curField.searchValue" />
      </el-form-item>


      <!-- <el-form-item label="标签宽度">
        <el-input v-model="fieldStore.curField.labelWidth" />
        <el-button type="primary" @click="onConfig">全局设置</el-button>
      </el-form-item> -->


      <el-form-item label="字典">
        <el-input v-model="fieldStore.curField.dicName" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="fieldStore.curField.type" placeholder="Select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-button-group>
        <el-button type="primary" @click="onSort(1)">首</el-button>
        <el-button type="primary" @click="onSort(2)">前</el-button>
        <el-button type="primary" @click="onSort(3)">后</el-button>
        <el-button type="primary" @click="onSort(4)">尾</el-button>
      </el-button-group>

    </div>
  </div>
</template>

<script setup>
import { useFieldStore } from '@/stores/field';
import { useOptionStore } from '@/stores/option';

const emit = defineEmits(["sort", "config"])

const fieldStore = useFieldStore()
const { options } = useOptionStore()

const onSort = (type) => {
  emit("sort", type)
}

const onConfig = () => {
  emit("config", fieldStore.curField.labelWidth)
}


</script>